import { withPixiApp, Container } from '@inlet/react-pixi'
import React from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'
import PropTypes from 'prop-types'
import { PointForKeyPoint } from '../brushes'

const EditKeypointPointView = ({
  label, scale, move, classObj,
}) => {
  const moveHOF = i => (x, y) => move(label.id, projectDuck.creators.actionMovePoint, i, x, y)
  const rightClickHOF = i => () => move(label.id, projectDuck.creators.actionRightClick, i)
  const classKeys = Object.keys(classObj.setting.points)
  return (
    <Container>
      {label.exterior.map((point, index) => (
        <PointForKeyPoint
          key={index}
          point={point}
          scale={scale}
          move={moveHOF(index)}
          rightClick={rightClickHOF(index)}
          innerColor={parseInt(classObj.setting.points[classKeys[index]].color.substring(1), 16)}
          outerColor={parseInt(classObj.setting.points[classKeys[index]].color.substring(1), 16)}
        />
      ))}
    </Container>
  )
}

EditKeypointPointView.propTypes = {
  label: PropTypes.object.isRequired,
  scale: PropTypes.number.isRequired,
  move: PropTypes.func.isRequired,
  classObj: PropTypes.object.isRequired,
}

const mapStateToProps = state => ({
  classObj: projectDuck.selectors.activeclassObject(state),
})

const mapDispatchToProps = {
  move: projectDuck.creators.actionDoAndUpdate,
}

export default withPixiApp(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(EditKeypointPointView),
)
